import React, { Component } from 'react'
import { Button, DatePicker, Form, Icon, Input, Table, message } from 'antd'
import moment from 'moment'
import { fetchPost } from '../../../utils/request'

const FormItem = Form.Item
const { RangePicker } = DatePicker

class EfficiencyStatistics extends Component {

  constructor (props) {
    super(props)
    this.state = {
      list: [],
      loading: true,
      name: '',
      startDate: moment().subtract('days', 29).format('YYYY-MM-DD'),
      endDate: moment().subtract('days', 16).format('YYYY-MM-DD'),
    }
  }

  componentDidMount () {
    this.getEfficiencyStatistics()
  }

  handelDateChange = (date, dateString) => {
    this.setState(
      {
        startDate: dateString[0],
        endDate: dateString[1]
      })
  }

  handleSearch = () => {
    this.props.form.validateFields((errors, values) => {
      if (!errors) {
        const { name } = values
        this.setState(
          { loading: true, name },
          () => this.getEfficiencyStatistics()
        )
      }
    })
  }

  getEfficiencyStatistics = () => {
    const { startDate, endDate, name } = this.state
    const URL = '/audit/data/export/'
    const params = { startDate, endDate, name }
    fetchPost(URL, params).then(response => {
      if (response.code === 200 && response.list.size !== 0) {
        this.setState({
          list: response.list,
          loading: false
        })
      } else {
        this.setState(
          { list: [], loading: false },
          () => message.info(response.msg)
        )
      }
    })
  }

  handleReset = () => {
    this.props.form.resetFields()
    this.setState(
      {
        startDate: moment().subtract('days', 29).format('YYYY-MM-DD'),
        endDate: moment().subtract('days', 16).format('YYYY-MM-DD'),
      }
    )
  }

  render () {

    const dateFormat = 'YYYY-MM-DD'
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        sm: { span: 6 },
      },
      wrapperCol: {
        sm: { span: 16 },
      },
    }

    const RangePickerLayout = {
      labelCol: {
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 20 },
      },
    }

    const { startDate, endDate, list } = this.state
    const rangeConfig = {
      rules: [{ type: 'array', message: 'Please Select Time!' }],
      initialValue: [moment(startDate, dateFormat), moment(endDate, dateFormat)]
    }
    const teamColumns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: 'Date',
        dataIndex: 'date',
        key: 'date'
      }, {
        title: 'Order Quantity',
        dataIndex: 'orderQuantity',
        key: 'orderQuantity',
        sorter: (a, b) => a.orderQuantity - b.orderQuantity,
        sortDirections: ['descend', 'ascend'],
      }, {
        title: 'Order Passed Quantity',
        dataIndex: 'orderPassedQuantity',
        key: 'orderPassedQuantity',
        sorter: (a, b) => a.orderPassedQuantity - b.orderPassedQuantity,
        sortDirections: ['descend', 'ascend'],
      }, {
        title: 'Pass Rate',
        dataIndex: 'passRate',
        key: 'passRate',
        render: (text) => text + '%',
        sorter: (a, b) => a.passRate - b.passRate,
        sortDirections: ['descend', 'ascend'],
      }, {
        title: 'Average Handle Orders Per Day',
        dataIndex: 'averageHandleOrdersPerDay',
        key: 'averageHandleOrdersPerDay',
        sorter: (a, b) => a.averageHandleOrdersPerDay - b.averageHandleOrdersPerDay,
        sortDirections: ['descend', 'ascend'],
      }, {
        title: 'First Day Overdue Rate',
        dataIndex: 'firstDayOverdueRate',
        key: 'firstDayOverdueRate',
        render: (text) => text + '%',
        sorter: (a, b) => a.firstDayOverdueRate - b.firstDayOverdueRate,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Overdue Rate',
        dataIndex: 'overdueRate',
        key: 'overdueRate',
        render: (text) => text + '%',
        sorter: (a, b) => a.overdueRate - b.overdueRate,
        sortDirections: ['descend', 'ascend'],
      }
    ]

    return (
      <div>

        <Form layout="inline">
          <FormItem {...RangePickerLayout}
                    label="date">
            {getFieldDecorator('range-picker', rangeConfig)(
              <RangePicker onChange={this.handelDateChange}/>
            )}
          </FormItem>

          <FormItem {...formItemLayout}
                    label='name'>
            {getFieldDecorator('name')(
              <Input placeholder='please input name'/>
            )}
          </FormItem>

          <Button className='ml10'
                  type="primary"
                  size="big"
                  onClick={this.handleSearch}>Search</Button>

          <Button className='ml20'
                  size="big"
                  onClick={this.handleReset}>
            <Icon type='reload'/>
          </Button>

        </Form>

        <Table columns={teamColumns}
               className='mt20'
               dataSource={list}
               key='id'
               pagination={false}
               loading={this.state.loading}
               bordered/>

      </div>
    )

  }

}

EfficiencyStatistics = Form.create()(EfficiencyStatistics)
export default EfficiencyStatistics
